import { onMounted, onUnmounted, ref } from "vue"

export const useContextMenu = (dom:any)=>{
    const x = ref(0)
    const y = ref(0)
    const isShow = ref(false)

    const handleContextMenu  = (e:MouseEvent)=>{
        e.preventDefault(); // 阻止浏览器的默认右键事件
        e.stopPropagation() // 阻止事件冒泡
        isShow.value = true
        x.value = e.clientX
        y.value = e.clientY
    }

    const close = ()=>{
        isShow.value = false
    }

    onMounted(()=>{
        dom.value && dom.value.addEventListener("contextmenu",handleContextMenu)

        // 实现右键取消菜单，包括其他地方用到的，确保只有一个菜单显示
        // 左键关闭
        window.addEventListener("click", close,true) //全部设置未捕获阶段触发，因为上面函数中设置了阻止事件冒泡，默认添加事件是捕获阶段，无法到window中触发事件
        // 右键关闭
        window.addEventListener("contextmenu", close,true) 
    })

    onUnmounted(()=>{
        dom.value && dom.value.removeEventListener("contextmenu",handleContextMenu)
        // 移除事件监听
        window.removeEventListener("click", close,true)
        window.removeEventListener("contextmenu", close,true)
    })

    return {
        x,
        y,
        isShow
    }
}